<template>
  <div class="add-api">

    <el-dialog title="添加接口" :visible.sync="dialogVisible" width="40%" :open="openDialog()">

      <el-form ref="apiForm" :model="apiForm" :rules="apiRules" label-width="80px">

        <el-form-item label="接口分组" required prop="groupId">
          <el-select v-model="apiForm.groupId" placeholder="请选择分组">
            <el-option v-for="item in groupList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口名" required prop="name">
          <el-input v-model="apiForm.name" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="接口路径" required prop="method">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="apiForm.path">
            <el-select slot="prepend" placeholder="请选择" v-model="apiForm.method" style="width:90px">
              <el-option label="GET" value="GET"></el-option>
              <el-option label="POST" value="POST"></el-option>
              <el-option label="DELETE" value="DELETE"></el-option>
              <el-option label="PUT" value="PUT"></el-option>
            </el-select>
          </el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="appApi(apiForm)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {

      dialogVisible: false,
      projectId: null,

      groupList: [],

      apiForm: {
        method: '',
        groupId: null,
        name: '',
        path: '',
        protocol: 'https',

      },

      apiRules: {
        name: [
          { required: true, message: '请输入接口名', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        groupId: [
          { required: true, message: '请选择分组', trigger: 'blur' },
        ],
        method: [
          { required: true, message: '请输入路径', trigger: 'blur' },
        ],
      }


    }
  },

  methods: {

    openDialog () {
      this.projectId = this.$store.state.api.projectId


    },

    //获取分组
    getGroup (projectId) {
      this.data = []
      this.$http({
        url: this.$http.adornUrl('/aitesting/group/listByProjectId'),
        method: 'get',
        params: {
          projectId: projectId,
          groupType: 0,
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.groupList = data.list
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      })
    },

    //添加接口
    appApi (form) {
      form.projectId = this.projectId
      this.$refs["apiForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/aitesting/api/save'),
            method: 'post',
            data: form,
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                type: 'success',
                message: data.msg,
              });
              this.dialogVisible = false
              this.$emit("getApi")
            } else {
              this.$message({
                type: 'warning',
                message: data.msg,
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  },

  mounted () {
    this.projectId = this.$store.state.api.projectId
    this.getGroup(this.projectId)
  }
}
</script>

<style scoped>
.add-api >>> .el-select {
  display: contents;
}
</style>